<template>
    <div class="menu-container no-scroll">
        <!--  -->
        <el-menu
            :background-color="variables.menuBg"
            :text-color="variables.menuText"
            :active-text-color="variables.menuActiveText"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            :default-active="defaultActiveMenu"
            :default-openeds="defaultOpenMenu"
            @select="handleMenuSelect"
            mode="vertical"
        >
            <!--v-show="firstMenu.hidden||$store.state.user.permissions.includes(firstMenu.meta.title)"-->

            <template v-for="firstMenu in menuList">
                <!-- 一级菜单 -->
                <el-menu-item
                    v-if="firstMenu.children.length == 1&&firstMenu.alwaysShow==false"
                    :key="firstMenu.children[0].name"
                    :index="firstMenu.children[0].name"
                >
                    <svg-icon :icon-class="firstMenu.meta.icon"></svg-icon>
                    <template slot="title">
                        <span>{{ firstMenu.children[0].meta.title }}</span>
                    </template>
                </el-menu-item>

                <!-- 二级菜单 -->
                <el-submenu
                    v-if="firstMenu.children.length >1||firstMenu.alwaysShow==true"
                    :key="firstMenu.name"
                    :index="firstMenu.name"
                >
                    <template slot="title">
                        <svg-icon :icon-class="firstMenu.meta.icon"></svg-icon>
                        <span>{{ firstMenu.meta.title }}</span>
                    </template>
                    <!-- 二级菜单 —— 子菜单 -->
                    <template  v-for="secondMenu in firstMenu.children">
                        <el-menu-item
                            :key="secondMenu.name"
                            :index="secondMenu.name"
                        >
                            {{ secondMenu.meta.title }}
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>
  import variables from '@/assets/style/variables.less'
  import menuRouters from '@/router/menu-router'
  import { mapGetters } from 'vuex'

  export default {
    data () {
        return {
        }
    },
    methods: {
        handleMenuSelect(key, keyPath) {
          console.log('key',key)
          console.log('keyPath',keyPath)
          this.$store.commit('setDefaultActiveMenu', key);
          this.$store.commit('setDefaultOpenMenu', [keyPath[0]]);
          this.$router.push({ name: key })
        },
    },

    computed: {
        ...mapGetters([
            'sidebar'
        ]),
        //less全局参数
        variables() {
            return variables
        },
        //菜单折叠
        isCollapse() {
            return !this.sidebar.opened;
        },
        menuList () {
          return menuRouters
          // return this.$store.state.menuList
        },
        defaultActiveMenu() {
            return this.$store.state.app.defaultActiveMenu || '';
        },
        defaultOpenMenu() {
          return this.$store.state.app.defaultOpenMenu || [''];
        }
    }
}
</script>

<style lang="less" scoped>
    .menu-container {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        /deep/ .el-menu {
            border-right: none;
        }
        /deep/ .el-menu--collapse {
            width: 86px;
        }
        /deep/ .el-menu-item {
            height: 58px;
            line-height: 58px;
            span {
                padding-left: 15px;
            }
        }
        /deep/ .el-menu-item i {
            /*margin-left: 8px;*/
            color: #FFFFFF;
            position: relative;
        }
        /deep/ .el-submenu__title {
            height: 58px;
            line-height: 58px;
            span {
                padding-left: 15px;
            }
        }
        /deep/ .el-submenu__title i {
            /*margin-left: 8px;*/
            color: #FFFFFF;
        }
        /deep/ .el-submenu .el-menu-item {
            height: 50px;
            line-height: 50px;
            padding-left: 65px !important;
            background-color: @subMenuBg !important;
        }
    }
</style>
